<script setup lang="ts">
import { ref } from 'vue'
import { manIntroduce, chatList } from './constants'

const tab = ref(0)
const introduce = ref(manIntroduce)
function to(idx: number) {
  tab.value = idx
}
</script>

<template>
  <div class="introduce" data-aos="zoom-in">
    <div class="main max-w-[85%] ml-auto mr-auto pt-10">
      <!-- 标题 -->
      <div
        class="character w-64 max-w-[90%] text-[#f3f4d9] h-16 flex items-center justify-center m-auto relative"
      >
        <div class="avatar w-12 h-12 absolute left-2"></div>
        <p class="text-2xl tracking-[0.5em] pl-10">伶伦</p>
      </div>
      <!-- 中间的背景框 -->
      <!-- pt-[28%] -->
      <div class="section pt-20 h-[70vh] pl-[16%] pr-[12%] relative -mt-3">
        <!-- 侧边栏选项卡 -->
        <div class="side-tab absolute top-20 left-0 w-12">
          <div
            :class="[
              tab == 0 ? 'introduce-btn-hover' : 'intro',
              'introduce-btn w-12 h-32 text-center flex items-center justify-center'
            ]"
          >
            <p class="w-5 text-md text-[#f3f4d9]" @click="to(0)">人物介绍</p>
          </div>
          <div
            :class="[
              tab == 1 ? 'introduce-btn-hover' : 'trait',
              'introduce-btn w-12 h-32 mt-3 text-center flex items-center justify-center'
            ]"
          >
            <p class="w-5 text-md text-[#f3f4d9]" @click="to(1)">人物特征</p>
          </div>
          <div
            :class="[
              tab == 2 ? 'introduce-btn-hover' : 'talk',
              'introduce-btn w-12 h-32 mt-3 text-center flex items-center justify-center'
            ]"
          >
            <p class="w-5 text-md text-[#f3f4d9]" @click="to(2)">闲谈</p>
          </div>
        </div>
        <!-- 主要的内容区域 -->
        <div class="text text-primary h-[80%] w-[90%] md:mt-8 m-auto overflow-scroll">
          <div v-if="tab === 0" class="intro-text leading-8 w-[95%] pt-2 md:pt-5">
            {{ introduce }}
            <img src="@/assets/img/2D/怜伦看书姿态.png" alt="" class="" />
          </div>
          <div v-if="tab === 1" class="intro-trait leading-8 pt-2 md:pt-5">
            <p>姓名：伶伦</p>
            <p>性别：男</p>
            <p>年龄：23岁</p>
            <p>血型：O型</p>
            <p>生日：2000/11/7</p>
            <p>身高：180cm</p>
            <p>体重：73.5kg</p>
            <p>身份：国师/乐官(古代);讲解员(现代)</p>
            <p>性格：聪明细心/风趣幽默/坚定执着/不拘小节</p>
            <p>爱好：音乐/阅读/美食</p>
            <p>最喜欢的东西：萨克斯</p>
            <p>最讨厌的东西：虫子</p>
            <p>口头禅：音乐话题想发言，你要在学二百年。</p>
          </div>
          <div v-if="tab === 2" class="intro-talk text-center pt-2 md:pt-5">
            <div
              v-for="chat in chatList"
              :key="chat.type"
              class="tab h-10 mt-5 leading-10 text-primary w-48 max-w-[80%] ml-auto mr-auto"
              @click="$router.replace({ path: '/introduce/chat', query: { type: chat.type } })"
            >
              {{ chat.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.avatar {
  background: url('../../assets/img/digman-avatar.png');
}
.character {
  background: url('../../assets/img/title.png');
}
.introduce-btn {
  background: url('../../assets/img/tooltip.png');
}
.introduce-btn-hover {
  background: url('../../assets/img/tooltip-hover.png');
}

.section {
  background: url('../../assets/img/dialog.png');
}

.tab {
  background: url('../../assets/img/input.png');
}
.tab,
.introduce-btn,
.character,
.avatar,
.section,
.introduce-btn-hover {
  background-size: 100% 100%;
}
</style>
